<template>
    <view class="content">
        <view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
            <view class="main-title dispaly-center"
                :style="{ height: systemInfo.sBarHeight + 'px', lineHeight: systemInfo.sBarHeight + 'px' }">
                <view class="nav-top dispaly-just-between" :style="{ 'width': 750 - barWidth * 2 + 'rpx' }">
                    <view class="back" @click="navTo(`back`)">
                        <tn-icon name="left" color="#000" size="40" />
                    </view>
                </view>
            </view>

        </view>
        <view class="form " :style="{ marginTop: topNavheight + 'px' }">
            <view class="title">完善工作履历</view>
            <view class="gz-zm ">
                <view class="form-item"> <text class="x">*</text> 上传工作证明</view>
                <view class="up">
                    <UploadImage :limit="5" @upload="data => submitFormData.work_cert = data" />
                </view>
            </view>
            <view class="gz-ll">
                <view class="form-item dispaly-just-between">
                    <view>
                        <text class="x">*</text>工作履历
                    </view>
                    <view class="icon" @click="addjobL">
                        <image src="/static/icon/add.png" />
                    </view>
                </view>
                <view class="ipt">
                    <view class=" dispaly-just-between" v-for="(item, index) in formData.jobLl"
                        :key="item.name + index">
                        <input class="ip" placeholder="请填写工作履历" v-model="item.value" />
                        <view class="j" v-if="index >= 1" @click="deleteJobL(item, index)">
                            <tn-icon name="reduce-circle" color="#eb4869" size="45" />
                        </view>
                    </view>
                </view>
            </view>


            <view class="nl">
                <view class="form-item">擅长科目</view>
                <view class="list">
                    <view @click="item.isS = !item.isS" :class="{ 'active': item.isS }"
                        class="list-item dispaly-align-center" v-for="(item, index) in subjectList" :key="index">{{
                            item.name }}</view>
                </view>
            </view>

            <view class="gz-zm zm" style="margin-top: 20rpx;">
                <view class="form-item">擅长科目(输入)</view>
                <view class="up-item dispaly-just-between">
                    <view class="text">
                        <input type="text" placeholder="输入擅长科目请用英文逗号隔开" v-model="goodAt">
                    </view>
                </view>
            </view>

            <view class="zw-js">
                <view class="form-item">自我介绍</view>
                <view class="tea">
                    <textarea class="tea-ipt" placeholder="请输入" v-model="submitFormData.introduce"></textarea>
                </view>
            </view>
            <view class="nl">
                <view class="form-item">方向选择</view>
                <view class="list">
                    <view @click="selectDirection(item, index)" :class="{ 'active': index == directionCurrent }"
                        class="list-item dispaly-align-center"
                        v-for="(item, index) in config?.direction_list[0].children" :key="index">{{
                            item.name }}</view>
                </view>
            </view>
            <view class="btn-box1 w-100 dispaly-align-center" @click="submit">
                <view class="btn1 dispaly-align-center">下一步</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import { ref, onMounted, reactive } from 'vue'
import { getElementHeight } from '@/utils/util'
import UploadImage from '@/components/uploadImage/uploadImage.vue'
import type { AddTeacherType, ChilrenType, SubType } from '@/types/responseData'
import { getTeacherConfig, addTeacher } from '@/api/home/home'
import { onLoad } from '@dcloudio/uni-app'
import type { RequsestAddTeacherType } from '@/types/requstParm'

// 获取配置
const config = ref<AddTeacherType>()
const subjectList = ref<Array<SubType> | any>([])
const getConfigData = async () => {
    const res = await getTeacherConfig()
    if (res.code == 0) {
        config.value = res.data
        subjectList.value = config.value?.good_at_list.map(item => {
            return {
                isS: false,
                name: item
            }
        })
    }
}


interface TJobLType {
    name: string,
    value: string
}
interface TFormDataType {
    jobLl: TJobLType[]
}
const formData = reactive<TFormDataType>({
    jobLl: [{ name: 'one', value: '' }]
})

// 添加工作履历
const addjobL = () => {
    formData.jobLl.push({ name: 'one', value: '' })
}

// 删除履历
const deleteJobL = (item: TJobLType, index: number) => {
    formData.jobLl.splice(index, 1)
    console.log(formData.jobLl)
}

// 擅长科目
interface TsubjectListType {
    name: string,
    id: number,
    isS?: boolean
}

// 选择方向
const directionCurrent = ref<number>(0)
const selectDirection = (item: TsubjectListType, index: number) => {
    directionCurrent.value = index
}


let submitFormData = reactive<RequsestAddTeacherType>({
    user_id: 3,
    work_cert: '',
    work_record: '',
    good_at: '',
    introduce: '',
    direction: '',
    is_gov: '',
    is_train: '',
    is_leave: ''
})
onLoad((option) => {
    submitFormData.is_gov = option?.is_gov
    submitFormData.is_train = option?.is_train
})

// 提交
let goodAt = ref<string>('')
const submit = async () => {
    submitFormData.direction = config.value?.direction_list[0].children[directionCurrent.value].id
    let work_record: string[] = []
    formData.jobLl.forEach(item => work_record.push(item.value))
    submitFormData.work_record = work_record.join(',')
    let subject = subjectList.value.filter((item: SubType) => item.isS)
    let good_at: string[] = []
    subject.forEach((item: SubType) => good_at.push(item.name))
    if (subject.length && goodAt.value) {
        submitFormData.good_at = goodAt.value + ',' + good_at.join(',')
    } else if (subject.length) {
        submitFormData.good_at = good_at.join(',')
    } else {
        submitFormData.good_at = goodAt.value
    }
    console.log(submitFormData.good_at, 'submitFormData.good_at')
    const res = await addTeacher(submitFormData)
    if (res.code == 0) {
        uni.showToast({
            title: res.msg as string,
            icon: 'none'
        })
        setTimeout(() => {
            uni.switchTab({
                url: '/pages/mine/mine'
            })
        }, 1000)
    }
    // console.log(submitFormData)
}


const systemInfo = uni.getStorageSync('systemInfo')
const { barWidth } = uni.getStorageSync('capsule')
// 获取top高度
const topNavheight = ref<number | unknown>(0)
onMounted(async () => {
    getConfigData()
    const height = await getElementHeight('.top')
    topNavheight.value = height
})
</script>

<style>
page {
    background: #fff;
}
</style>



<style lang="scss" scoped>
.active {
    border: 2rpx solid #008298;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #008298;
}

input {
    width: 600rpx;
}

.top {
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    background: rgb(155, 227, 229);
    background: linear-gradient(180deg, rgba(155, 227, 229, 1) 0%, rgba(255, 255, 255, 1) 76%, rgba(255, 255, 255, 1) 100%);
}

.ip {
    background: #F5F5F5;
    border-radius: 20rpx;
    padding: 0 30rpx;
}

.back {
    padding-left: 30rpx;
}

.x {
    color: #F90D0D;
}

.btn-box1 {
    margin-top: 92rpx;

    .btn1 {
        width: 523rpx;
        height: 84rpx;
        background: #008298;
        border-radius: 12rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
    }
}

.form-item {
    margin-bottom: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #646464;
}

.form {
    padding: 30rpx 30rpx 50rpx 30rpx;
    width: 750rpx;

    .zm {
        margin-bottom: 40rpx;

        input {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #AEAEAE;
            // padding: 0 29rpx;
        }
    }

    .gz-zm {
        .up-item {
            height: 90rpx;
            background: #F5F5F5;
            border-radius: 20rpx;
            padding: 0 30rpx;

            .text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #aeaeae;
            }
        }
    }

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 40rpx;
        color: #000000;
        margin-bottom: 37rpx;
    }

    .gz-ll {
        margin: 37rpx 0;

        .icon {
            image {
                width: 34rpx;
                height: 34rpx;
            }
        }

        .ipt {

            input {
                width: 600rpx;
                height: 90rpx;
                margin-right: 40rpx;
                margin-bottom: 20rpx;
            }

            .j {}
        }
    }

    .nl {
        .list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .list-item {
                margin: 10rpx 6rpx;
                width: 218rpx;
                height: 80rpx;
                background: #F5F5F5;
                border-radius: 15rpx;
            }
        }
    }

    .zw-js {
        margin-top: 40rpx;
        margin-bottom: 40rpx;

        .tea {
            .tea-ipt {
                width: 100%;
                height: 251rpx;
                background: #F5F5F5;
                border-radius: 20rpx;
                padding: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #AEAEAE;
            }
        }
    }
}

:deep(.tn-popup__content) {
    border-radius: 20rpx 20rpx 0 0;
}
</style>